<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  imageSrc: {
    type: String,
    required: true,
    default: null,
  },
  thumbnail: {
    type: String,
    required: true,
    default: null,
  },
})
const showPreview = ref(false)

const image = ref(props.imageSrc as string)
const thumbnailImage = ref(props.thumbnail as string)
</script>

<template>
  <div>
    <img
      :src="thumbnailImage"
      alt="Thumbnail"
      class="cursor-pointer transition duration-300 ease-in-out rounded"
      @click="showPreview = true"
    />
  </div>

  <div
    v-if="showPreview"
    class="absolute inset-0 flex items-center justify-center p-16 bg-opacity-50 bg-black z-50"
    @click="showPreview = false"
  >
    <img
      :src="image"
      alt="Preview"
      class="max-h-full max-w-full rounded"
    />
  </div>
</template>

<style scoped>

</style>